<template>
  <page-meta :root-font-size="$rootFontSize"></page-meta>
  <view>
    <!--邀请链接-->
    <u-navbar
      title="邀请链接"
      leftIcon="arrow-left"
      leftIconSize="40"
      leftIconColor="#000000"
      @rightClick="goDetail"
      :placeholder="true"
      :autoBack="true"
    >
      <view slot="right" class="text-sm text-light">提成规则</view>
    </u-navbar>
    <view class="mx-4">
      <view class="text-sm leading-7 mt-2.5" v-html="content"></view>
      <view class="mx-3 mt-6 relative">
        <view
          class="absolute right-3 top-2.5"
          @click="onCopy(link + user.userCode)"
          ><u-icon name="/static/icons/icon-copy.png" size="36"></u-icon
        ></view>
        <view class="w-full bg-gray rounded"
          ><view
            class="text-dark text-xs mx-3 h-10 leading-10 w-5/6 whitespace-nowrap overflow-hidden"
            >{{ link + user.userCode }}</view
          ></view
        >
      </view>
      <view class="mx-10 mt-12">
        <view
          class="w-full bg-primary rounded-full leading-10 text-base h-10 text-center text-white bg-box-shadow"
          @click="onCopy(content + link + user.userCode)"
          >复制全部</view
        >
      </view>
    </view>
    <!--提成规则-->
    <u-modal
      :show="isShow"
      title="提成规则"
      confirmColor="#FF3D62"
      :title-style="{
        'font-size': '34rpx',
        'font-weight': 'bold',
        'line-height': '48rpx',
        color: '#000',
      }"
      @confirm="isShow = false"
    >
      <view
        class="py-1 text-sm leading-6 overflow-y-auto mt-1.5"
        style="max-height: 500rpx"
      >
        <u-parse :content="inviteRule"></u-parse>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { getInfo } from '@/services/user';
import { getRichText } from '../../services/user';

export default {
  data() {
    return {
      isShow: false,
      content: '',
      link: window.location.origin + process.env.VUE_APP_PATH + '/register?id=',
      user: {},
      inviteRule: '',
    };
  },
  async created() {
    this._getInfo();
  },
  methods: {
    //获取富文本
    async _getRichText(type) {
      const { code, data } = await getRichText({ type });
      if (code != 200) return;
      if (type == 'buyinvite') {
        this.inviteRule = data.html;
      } else if (type == 'buyinvitelink') {
        this.content = data.html;
      }
    },
    //获取info接口
    async _getInfo() {
      const { code, data } = await getInfo();
      if (code != 200) return;
      this.user = data;
      //if (process.env.NODE_ENV === 'development') {
      this.link = this.user.promotionLink + '/register?id=';
      //}
      this._getRichText('buyinvitelink');
    },
    //查看提成规则
    goDetail() {
      this._getRichText('buyinvite');
      this.isShow = true;
    },
    //html标签反转义
    HTMLEncode(text) {
      let temp = document.createElement('div');
      temp.innerHTML = text;
      let output = temp.innerText || temp.textContent;
      temp = null;
      return output;
    },
    //复制链接
    onCopy(content) {
      content = this.HTMLEncode(content);
      //console.log(content);
      uni.setClipboardData({
        data: content,
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'none',
          });
        },
      });
    },
  },
};
</script>

<style></style>
